<template>
	<view class="container">
		<!-- 地址 -->
		<view class="addressInformation">
			<div class="addressDetail">
				<div class="address">松江区荣乐中路大江商厦6层</div>
				<div class="name">小木鱼&nbsp;&nbsp;13265389108</div>
			</div>
			<span style="color: #c0c0c0;">＞</span>
		</view>
		<!-- 送达时间 -->
		<view class="deliveryTime">
			<div class="time">
				<span class="timeText">送达时间</span>
				<span class="selectTime" @click="show=true">请选择送达时间<span>></span></span>
			</div>
			<u-popup v-model="show" mode="bottom" border-radius="30" height="600">
				<view class="timeSelect">
					<div class="header">选择送达时间</div>
					<div class="select">
						<div class="date">
							<span class="today">今天0203日</span>
							<span class="tomorrow">明天0204日</span>
						</div>
						<scroll-view class="time" scroll-y="true">
							<div class="timeItem" :class="{'active':active===1}" @click="changeActive(1)">尽快送达(预计09:30以前)</div>
							<div class="timeItem" :class="{'active':active===2}" @click="changeActive(2)">09:00-09:30</div>
							<div class="timeItem" :class="{'active':active===3}" @click="changeActive(3)">09:30-10:00</div>
							<div class="timeItem" :class="{'active':active===4}" @click="changeActive(4)">10:00-10:30</div>
							<div class="timeItem" :class="{'active':active===5}" @click="changeActive(5)">10:30-11:30</div>
							<div class="timeItem" :class="{'active':active===6}" @click="changeActive(6)">11:00-12:30</div>
							<div class="timeItem" :class="{'active':active===7}" @click="changeActive(7)">12:30-13:00</div>
							<div class="timeItem" :class="{'active':active===8}" @click="changeActive(8)">13:00-13:30</div>
							<div class="timeItem" :class="{'active':active===9}" @click="changeActive(9)">13:30-14:00</div>
							<div class="timeItem" :class="{'active':active===10}" @click="changeActive(10)">14:00-14:30</div>
						</scroll-view>
					</div>
					<u-button type="success" shape="circle" @click="show=false">确定</u-button>
				</view>
			</u-popup>
			<div class="compensation">
				<span class="gerrn">超时补偿</span>
				<span>超时十分钟获赔300积分？</span>
			</div>
			<div class="orderGood">
				<div class="good">
					<image style="width: 200rpx;height: 200rpx;border-radius: 50%;" src="../../static/image/category/00-07-60.jpg"></image>
					<div class="goodMessage">
						<div class="head">冬笋&nbsp;约700g</div>
						<div class="price">单价：¥11.10/份</div>
						<div class="number">数量：1份</div>
					</div>
				</div>
				<span>¥11.10</span>
			</div>
		</view>
		<!-- 支付方式 -->
		<view class="pay">
			<div class="payMethod">支付方式</div>
			<div class="zfb">
				<div class="payZfb">
					<u-icon name="zhifubao-circle-fill" color="blue" size="50"></u-icon>
					<span>支付宝支付</span>
					<span style="font-size: 28rpx;color: red;margin-left: 20rpx;">推荐</span>
				</div>
				<radio style="transform:scale(0.6)" checked="true"></radio>
			</div>
			<div class="wx">
				<div class="payWx">
					<u-icon name="weixin-fill" color="#18B566" size="50"></u-icon>
					<span>微信支付</span>
				</div>
				<radio style="transform:scale(0.6)"></radio>
			</div>
			<div class="hb">
				<div class="payHb">
					<u-icon name="rmb-circle" color="blue" size="50"></u-icon>
					<span>花呗支付</span>
				</div>
				<radio style="transform:scale(0.6)"></radio>
			</div>
		</view>
		<!-- 绿卡会员 -->
		<view class="members">
			<div class="greenCard">
				<div class="introduce">
					<span class="vip">绿卡会员</span>
					<div class="open">开通绿卡，本单最高可减<span style="color: red;">0.60元</span></div>
					<div class="grey">一天两毛五，一年最高可省806元？</div>
				</div>
				<div class="price">
					<span>¥88.00/年</span>
					<radio style="transform:scale(0.7)"></radio>
				</div>
			</div>
		</view>
		<!-- 优惠券 -->
		<view class="coupons">
			<span>优惠券</span>
			<div class="useCoupons">
				<span class="number">-¥20.00 <span style="color: #C0C0C0;font-size:38rpx;margin-left: 10rpx;">></span></span>
				<span class="text">积分改为兑换红包使用啦</span>
			</div>
		</view>
		<!-- 备注 -->
		<view class="note">
			<span>备注</span>
			<div @click="toNote">选填，可以告诉我们您的特殊需求&nbsp;></div>
		</view>
		<!-- 商品金额 -->
		<view class="goodsPrice">
			<div class="item">
				<span class="text">商品金额</span>
				<span class="number">¥45.25</span>
			</div>
			<div class="item">
				<span class="text">配送费</span>
				<span class="number">¥0.00</span>
			</div>
			<div class="item">
				<span class="text">优惠券</span>
				<span class="number" style="color: red;">-¥20.00</span>
			</div>
		</view>
		<!-- 提交订单 -->
		<div class="submit">
			<span>实付</span>
			<div>¥25.25</div>
			<u-button type="error" size="medium" shape="circle" >提交订单</u-button>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				active:1
			}
		},
		methods: {
			toNote(){
				uni.navigateTo({
					url:'../note/note'
				})
			},
			changeActive(num){
				this.active=num
			}
		}
	}
</script>

<style scoped lang="scss">
.container{
	background: #fafafa;
	padding: 30rpx 0 150rpx;
	//地址
	.addressInformation{
		padding: 20rpx 30rpx;
		background: #fff;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px dashed #18B566;
		.addressDetail{
			display: flex;
			flex-direction: column;
			.address{
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.name{
				color: #333;
				font-size: 32rpx;
			}
		}
	}
	//送达时间
	.deliveryTime{
		padding: 30rpx 20rpx 0;
		background: #fff;
		.time{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.timeText{
				color: #333;
				font-size: 32rpx;
			}
			.selectTime{
				color: #18B566;
				font-weight: bold;
				font-size: 36rpx;
				span{
					color: #C0C0C0;
					margin-left: 10rpx;
				}
			}
		}
		//选择时间
		.timeSelect{
			padding: 30rpx 20rpx 20rpx 0rpx;
			.header{
				height: 60rpx;
				width: 100%;
				text-align: center;
				font-size: 36rpx;
			}
			.select{
				display: flex;
				.date{
					width: 40%;
					margin-right: 30rpx;
					display: flex;
					flex-direction: column;
					.today{
						padding-left: 30rpx;
						background-color: #fff;
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						padding-bottom: 30rpx;
					}
					.tomorrow{
						padding-left: 30rpx;
						padding-top: 30rpx;
						flex: 1;
						background-color: #fafafa;
						color: #C0C0C0;
					}
				}
				.time{
					width: 60%;
					height: 410rpx;
					.timeItem{
						padding: 20rpx;
						border-bottom: 1px solid #fafafa;
						font-size: 32rpx;
					}
					.active{
						font-weight: bold;
						color: #18B566;
					}
				}
			}
		}
		//超时补偿
		.compensation{
			font-size: 28rpx;
			color: #C0C0C0;
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #fafafa;
			.gerrn{
				border: 1px solid #18B566;
				background-color: #DBF1E1;
				color: #18B566;
				border-radius: 5rpx;
				margin-right: 10rpx;
			}
		}
		.orderGood{
			background: #fff;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			padding: 20rpx;
			.good{
				display: flex;
				align-items: center;
				.goodMessage{
					margin-left: 50rpx;
					.head{
						font-size: 32rpx;
					}
					.price{
						color: #C0C0C0;
						font-size: 28rpx;
					}
					.number{
						color: #C0C0C0;
						font-size: 28rpx;
					}
				}
			}
			span{
				font-size: 32rpx;
				margin-top: 20rpx;
			}
		}
	}
	//支付
	.pay{
		background: #fff;
		margin-top: 30rpx;
		padding: 30rpx 20rpx;
		.payMethod{
			font-size: 32rpx;
			color: #333;
		}
		.zfb{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 30rpx;
			.payZfb{
				display: flex;
				align-items: center;
				span{
					margin-left: 10rpx;
					font-size: 32rpx;
				}
			}
		}
		.wx{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 30rpx;
			.payWx{
				display: flex;
				align-items: center;
				span{
					margin-left: 10rpx;
					font-size: 32rpx;
				}
			}
		}
		.hb{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 30rpx;
			.payHb{
				display: flex;
				align-items: center;
				span{
					margin-left: 10rpx;
					font-size: 32rpx;
				}
			}
		}
	}
	//绿卡会员
	.members{
		width: 100%;
		padding: 30rpx;
		background-color: #fff;
		box-sizing: border-box;
		margin-top: 20rpx;
		.greenCard{
			border: 1px solid #18B566;
			background: rgba(227,247,232,.1);
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 10rpx;
			.introduce{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.vip{
					background: green;
					color: #fff;
					font-size: 24rpx;
					width: 100rpx;
					border-radius: 5rpx;
				}
				.open{
					font-size: 32rpx;
					margin-top: 20rpx;
				}
				.grey{
					font-size: 32rpx;
					margin-top: 20rpx;
					color: #C0C0C0;
					font-size: 28rpx;
				}
			}
			.price{
				display: flex;
				align-items: center;
				span{
					font-size: 34rpx;
					font-weight: bold;
				}
			}
		}
	}
	//优惠券
	.coupons{
		height: 100rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		align-items: flex-start;
		margin-top: 20rpx;
		span{
			font-size: 32rpx;
			color: #333;
		}
		.useCoupons{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			.text{
				font-size: 28rpx;
				color: red;
			}
		}
	}
	//备注
	.note{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 30rpx;
		background-color: #fff;
		span{
			font-size: 32rpx;
			color: #333;
		}
		div{
			font-size: 32rpx;
			color: #C0C0C0;
		}
	}
	//商品金额
	.goodsPrice{
		margin-top: 20rpx;
		background: #fff;
		padding:40rpx 30rpx;
		.item{
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.text{
				font-size: 32rpx;
			}
			.number{
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	//提交订单
	.submit{
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;
		span{
			font-size: 32rpx;
		}
		div{
			font-size: 36rpx;
			color: #DD524D;
			margin-right: 20rpx;
		}
	}
}
</style>
